<template>
  <view class="container">
    <!-- 订单状态切换 -->
    <view class="order-tabs">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view v-if="orders.length === 0" class="empty-state">
        <image
          src="/static/empty-order.png"
          mode="aspectFit"
          class="empty-image"
        ></image>
        <text class="empty-text">暂无订单</text>
      </view>

      <view v-else v-for="order in orders" :key="order.id" class="order-item">
        <view class="order-header">
          <text class="order-number">订单号：{{ order.orderNumber }}</text>
          <text class="order-status">{{ order.status }}</text>
        </view>

        <view class="order-content">
          <image
            :src="order.productImage"
            mode="aspectFill"
            class="product-image"
          ></image>
          <view class="product-info">
            <text class="product-name">{{ order.productName }}</text>
            <text class="product-price">¥{{ order.price }}</text>
            <text class="product-quantity">x{{ order.quantity }}</text>
          </view>
        </view>

        <view class="order-footer">
          <text class="total-price">总计：¥{{ order.totalPrice }}</text>
          <view class="button-group">
            <button
              v-if="order.status === '待付款'"
              class="btn btn-primary"
              @click="handlePay(order)"
            >
              立即付款
            </button>
            <button
              v-if="order.status === '待收货'"
              class="btn btn-primary"
              @click="handleConfirmReceive(order)"
            >
              确认收货
            </button>
            <button
              v-if="order.status === '已完成'"
              class="btn btn-default"
              @click="handleDelete(order)"
            >
              删除订单
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

// 订单状态标签
const tabs = ["全部", "待付款", "待发货", "待收货", "已完成"];
const currentTab = ref(0);

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    orderNumber: "GM202403150001",
    status: "待付款",
    productName: "冰红茶",
    productImage: "/static/Advertisement/binghongcha.jpeg",
    price: 3.5,
    quantity: 2,
    totalPrice: 7.0,
  },
  {
    id: 2,
    orderNumber: "GM202403150002",
    status: "待收货",
    productName: "脉动",
    productImage: "/static/Advertisement/maidong.jpeg",
    price: 4.0,
    quantity: 1,
    totalPrice: 4.0,
  },
]);

// 切换订单状态标签
const switchTab = (index: number) => {
  currentTab.value = index;
  // TODO: 根据状态筛选订单
};

// 处理支付
const handlePay = (order: any) => {
  uni.showModal({
    title: "提示",
    content: "确认支付该订单？",
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用支付接口
        uni.showToast({
          title: "支付成功",
          icon: "success",
        });
      }
    },
  });
};

// 确认收货
const handleConfirmReceive = (order: any) => {
  uni.showModal({
    title: "提示",
    content: "确认已收到商品？",
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用确认收货接口
        uni.showToast({
          title: "确认收货成功",
          icon: "success",
        });
      }
    },
  });
};

// 删除订单
const handleDelete = (order: any) => {
  uni.showModal({
    title: "提示",
    content: "确认删除该订单？",
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用删除订单接口
        uni.showToast({
          title: "删除成功",
          icon: "success",
        });
      }
    },
  });
};

// 页面加载时获取订单数据
onMounted(() => {
  // TODO: 调用获取订单列表接口
});
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.order-tabs {
  display: flex;
  background-color: #ffffff;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #666;
  padding: 8px 0;
  position: relative;
}

.tab-item.active {
  color: #007aff;
  font-weight: bold;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: #007aff;
}

.order-list {
  padding: 10px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.empty-image {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}

.empty-text {
  color: #999;
  font-size: 14px;
}

.order-item {
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.order-number {
  font-size: 14px;
  color: #666;
}

.order-status {
  font-size: 14px;
  color: #007aff;
}

.order-content {
  display: flex;
  margin-bottom: 10px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-right: 10px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 14px;
  color: #333;
}

.product-price {
  font-size: 14px;
  color: #ff6b6b;
}

.product-quantity {
  font-size: 12px;
  color: #999;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.total-price {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.button-group {
  display: flex;
  gap: 10px;
}

.btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 15px;
  border: none;
}

.btn-primary {
  background-color: #007aff;
  color: #ffffff;
}

.btn-default {
  background-color: #f0f0f0;
  color: #666;
}
</style>
